<template>
	<view class="cu-card article" @click="handleDetail">
		<view class="cu-item shadow">
			<view class="title flex align-center">
				<view class="text-cut flex align-center">
					<view class="cu-tag bg-olive radius shadow margin-right">{{ course.classify }}</view>
					<view class="text-xl">
						{{ course.name }}
					</view>
					<view class="margin-left" style="font-weight: normal;">
						[{{course.age}}]
					</view>
				</view>
			</view>
			<view class="margin-left margin-bottom margin-right flex align-center justify-between">
				<view class="flex align-center">
	
					<view>
						{{ parseTime(course.startTime, '{y}.{m}.{d}') + '-' + parseTime(course.finishTime, '{m}.{d}') }}
					</view>
				</view>
				<view class="text-red text-bold text-xl text-right margin-bottom">￥{{ course.price }}</view>
			</view>
			<view class="content flex justify-between">
				<view class="cu-capsule radius">
					<view class='cu-tag bg-olive sm'>
						教师
					</view>
					<view class="cu-tag line-olive sm" v-for="(item, index) in course.teacherList" :key="index">
						{{ item.realName }}
					</view>
				</view>
				<view>
					<view class="flex">
						<view class="cu-capsule round">
							<view class='cu-tag sm bg-grey '>
								容量
							</view>
							<view class="cu-tag sm line-gray">
								{{ course.capacity }}
							</view>
						</view>
						<view class="cu-capsule round">
							<view class='cu-tag sm bg-grey '>
								已售
							</view>
							<view class="cu-tag sm line-gray">
								{{ course.capacity - course.surplus }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/utils/parse.js'
	
	export default {
		name:"course-item",
		props: {
			course: {
				required: true,
				type: Object
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			parseTime,
			handleDetail() {
				this.$store.commit('course/set_courseId', this.course.id)
				uni.navigateTo({
					url: '/pages/course/course-detail/course-detail'
				})
			}
		}
	}
</script>

<style>

</style>
